<template>
  <div id="pricePopover" class="product-popover-view">

    <el-popover ref="distributePricePpopover" v-model:visible="visible" :placement="position" :width="900"
      trigger="click">
      <template #reference>
        <slot />
      </template>
      <div style="display: flex;justify-content: space-between;padding-bottom: 10px">
        <div>
          <span v-if="column" style="color: #f57861;">您选择的配送费：{{ column.distributePrice }}
            （编号为：{{ column.distributeServeNo }}）</span>
        </div>

        <div class="btn-view">
          <el-button class="border-btn" size="mini" @click="onCancel">取消
          </el-button>
          <el-button class="main-btn" size="mini" type="primary" @click="onConfirm">确定
          </el-button>
        </div>

      </div>
      <el-table ref="singleTable" max-height="300px" header-cell-class-name="popover-table-header" border
        :data="tableData" highlight-current-row style="width: 100%" @current-change="handleCurrentChange"
        @row-dblclick="handledbclick">
        <el-table-column label="编号" prop="distributeServeNo" header-align="center" min-width="100" />

        <el-table-column label="配送服务摘要信息" prop="distributeAbstract" header-align="center" min-width="100"
          show-overflow-tooltip />

        <el-table-column label="适用地区" header-align="center" width="200px">
          <template #default="scope">
            <area-list-view :areas="scope.row.region" />
          </template>
        </el-table-column>

        <el-table-column label="配送费">
          <template #default="scope">
            <div v-if="scope.row.computeMode==='固定价格'">
              <span>{{ scope.row.distributePrice }}元</span><span v-if="scope.row.sellUnit"> /
                {{ getLabel('sell_unit',scope.row.sellUnit) }}</span>
            </div>
            <div v-if="scope.row.computeMode==='终端价百分比'">
              <span>{{ scope.row.distributePrice }}%</span><span>终端价</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="expireTime" label="服务结束日期" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ dateFormat('yyyy-mm-dd HH:MM', scope.row.expireTime) }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="contractNumber" label="关联配送合同" show-overflow-tooltip>
          <template #default="scope">
            <div>{{ scope.row.contractNumber }}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-popover>

  </div>
</template>
<script>

import {defineComponent, getCurrentInstance, inject, onMounted, ref, watch,} from "vue";

export default defineComponent({
  name: "distributePricePopover",
  props: {
    searchs: {
      type: String,
      default: "",
    },
    position: {
      type: String,
      default: "bottom-start",
    },
    datas: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance();
    const api = inject("api");
    var visible = ref(false);
    var tableData = ref([]);
    var column = ref(null);
    const singleTable = ref(null);

    const getData = () => {
      if (props.datas && props.datas.productId && props.datas.distributeId) {
        api.marketingMatching.REGIONAL_PRICE_LIST(props.datas).then((res) => {
          if (!res.code && res.data) {
            tableData.value = res.data.distrbuteServeList;
          }
        });
      }
    };

    watch(
      () => props.searchs,
      (newS, oldS) => {
        getData();
        visible.value = true;
      }
    );

    onMounted(() => {
      document.addEventListener("click", (e) => {
        var pop = document.getElementById("pricePopover");

        if (e.target !== pop && !document.contains(pop, e.target)) {
          console.log(111);
        } else {
          visible.value = false;
        }
      });
    });

    const handleCurrentChange = (val) => {
      column.value = val;
    };

    const onConfirm = () => {
      if (!column) {
        currentInstance.proxy.customMessage({
          type: "error",
          message: "请选择终端价",
        });
      }

      const a = JSON.parse(JSON.stringify(column.value));
      emit("confirm", a);

      setTimeout(() => {
        column.value = null;
        visible.value = false;
      }, 100);
    };

    const onCancel = () => {
      singleTable.value.setCurrentRow();
      column.value = null;
      visible.value = false;
    };

    const onClose = () => {
      singleTable.value.setCurrentRow();
      column.value = null;
      visible.value = false;
    };

    const handledbclick = (row, column, event) => {
      column.value = row;
      emit("confirm", column);
      visible.value = false;
    };

    const openPopover = () => {
      console.log(props.datas);
      tableData.value = [];
      getData();
      setTimeout(() => {
        visible.value = true;
      }, 300);
    };

    return {
      visible,
      tableData,
      singleTable,
      column,

      handleCurrentChange,
      onConfirm,
      onCancel,
      onClose,
      handledbclick,
      openPopover,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
</style>

